<template>
  <div class="sum_index">
    <div>
      <el-form
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
        style="margin-left: 10px; margin: 20px"
      >
        <el-form-item>
          <el-button size="mini" @click="getData(0)">今天</el-button>
          <el-button size="mini" @click="getData(1)">昨天</el-button>
          <el-button size="mini" @click="getData(2)">本周</el-button>
          <el-button size="mini" @click="getData(3)">本月</el-button>
          <el-date-picker
            style="margin: 0px 10px"
            v-model="dateRangeCreatedDate"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            size="mini"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <el-button type="primary" size="mini" @click="getData(4)"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="panel-group">
        <el-col :xs="12" :sm="12" :lg="12">
          <!-- <div class="flex xiaoliang">
            <div style="line-height: 62px; font-size: 2vw">
              {{ form[0].zongliters }}
            </div>
            <div style="font-size: 2vw">总销量(L)</div>
          </div> -->
          <div class="flex xiaoliang">
            <div style="font-size: 28px; margin-top: -20px">总计</div>
            <div class="flex-qy" style="margin-top: 30px">
              <div class="flex-qy-sx" style="margin-right: 10px">
                <div style="font-size: 1.5vw">{{ form[0].zongliters }}</div>
                <div style="font-size: 1.5vw">升数(L)</div>
              </div>
              <div class="flex-qy-sx" style="margin-left: 10px">
                <div style="font-size: 1.5vw">{{ form[0].zongAmt }}</div>
                <div style="font-size: 1.5vw">金额(元)</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="12">
          <div class="flex xiaoe">
            <div style="font-size: 28px; margin-top: -20px">到账</div>
            <div class="flex-qy" style="margin-top: 30px">
              <div class="flex-qy-sx" style="margin-right: 10px">
                <div style="font-size: 1.5vw">{{ formReceive[0].czAmt }}</div>
                <div style="font-size: 1.5vw">充值(元)</div>
              </div>
              <div class="flex-qy-sx" style="margin-left: 10px">
                <div style="font-size: 1.5vw">
                  {{ formReceive[0].receiveAmt }}
                </div>
                <div style="font-size: 1.5vw">到账(元)</div>
              </div>
            </div>
          </div>
        </el-col>
        <!-- 
        <el-col :xs="12" :sm="12" :lg="6">
          <div class="flex qiyou">
            <div style="font-size: 28px; margin-top: -20px">汽油</div>
            <div class="flex-qy" style="margin-top: 30px">
              <div class="flex-qy-sx" style="margin-right: 10px">
                <div style="font-size: 1.5vw">{{ form[0].qyliters }}</div>
                <div style="font-size: 1.5vw">升数(L)</div>
              </div>
              <div class="flex-qy-sx" style="margin-left: 10px">
                <div style="font-size: 1.5vw">{{ form[0].qyamt }}</div>
                <div style="font-size: 1.5vw">金额(元)</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6">
          <div class="flex chaiyou">
            <div style="font-size: 28px; margin-top: -20px">柴油</div>
            <div class="flex-qy" style="margin-top: 30px">
              <div class="flex-qy-sx" style="margin-right: 10px">
                <div style="font-size: 1.5vw">{{ form[0].cyliters }}</div>
                <div style="font-size: 1.5vw">升数(L)</div>
              </div>
              <div class="flex-qy-sx" style="margin-left: 10px">
                <div style="font-size: 1.5vw">{{ form[0].cyamt }}</div>
                <div style="font-size: 1.5vw">金额(元)</div>
              </div>
            </div>
          </div>
        </el-col>
        -->
      </el-row>
    </div>

    <div
      style="width: 100%; height: 151px; background: #ffffff; margin-top: 40px"
    >
      <!--<span style="color: #ff9955; font-size: 25px">|</span>-->
      <span style="font-size: 20px">收入概览</span>
      <el-table :data="form" style="width: 100%; margin-top: 20px">
        <af-table-column prop="wxAmt" label="微信(元)" align="left">
        </af-table-column>
        <af-table-column prop="dzkAmt" label="电子卡(元)" align="left">
        </af-table-column>
        <af-table-column prop="zfbAmt" label="支付宝(元)" align="left">
        </af-table-column>
        <af-table-column prop="xjAmt" label="现金(元)" align="left">
        </af-table-column>
        <af-table-column prop="didiAppAmt" label="滴滴APP(元)" align="left">
        </af-table-column>
        <af-table-column prop="tyAppAmt" label="团油APP(元)" align="left">
        </af-table-column>
        <af-table-column prop="otherAmt" label="其他(元)" align="left">
        </af-table-column>
      </el-table>
    </div>
    <div style="width: 100%; height: 151px; margin-top: 40px">
      <!--<span style="color: #ff9955; font-size: 25px">|</span>-->
      <span style="font-size: 20px">今日数据</span>

      <el-table
        :data="infoFrom"
        style="width: 100%; margin-top: 20px; margin-bottom: 40px"
      >
        <af-table-column prop="czAmt" label="充值金额(元)" align="left">
        </af-table-column>
        <af-table-column prop="xfAmt" label="消费金额(元)" align="left">
        </af-table-column>
        <af-table-column prop="yeAmt" label="余额(元)" align="left">
        </af-table-column>
        <af-table-column prop="jrhy" label="新增电子卡(元)" align="left">
        </af-table-column>
        <af-table-column prop="zonghy" label="电子卡总数（个）" align="left">
        </af-table-column>
        <!--
        <af-table-column prop="tyAppAmt" label="营销费用(元)" align="left">
        </af-table-column>
        <af-table-column prop="otherAmt" label="营销产出比(%)" align="left">
        </af-table-column>
        -->
      </el-table>
      <!--
      <el-row
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
        "
      >
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div>
              <span class="sr-font">{{ infoFrom.czAmt }}</span>
            </div>
            <div>充值金额(元)</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div>
              <span class="sr-font">{{ infoFrom.xfAmt }}</span>
            </div>
            <div>消费金额(元)</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div>
              <span class="sr-font">{{ infoFrom.yeAmt }}</span>
            </div>
            <div>余额(元)</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div>
              <span class="sr-font">{{ infoFrom.jrhy }}</span>
            </div>
            <div>新增电子卡(个)</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div>
              <span class="sr-font">{{ infoFrom.zonghy }}</span>
            </div>
            <div>电子卡总数（个）</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div><span>0</span></div>
            <div>营销费用(元)</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div><span>0</span></div>
            <div>营销产出比(%)</div>
          </div>
        </el-col>
      </el-row>
      -->
    </div>
  </div>
</template>

<script>
import {
  listSum,
  listOilType,
  listViewData,
  listCZXFData,
  listHYData,
  listJRHYData,
  listAllSum,
  listReceiveAmt,
} from "@/api/dataSource/saleReport";

export default {
  name: "Overview_Summary",
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      dateRangeCreatedDate: [],
      // 数据概览 和 收入概览
      form: [
        {
          zongAmt: 0, // 总金额
          zongliters: 0, // 总销量
          qyamt: 0, // 汽油金额
          cyamt: 0, // 柴油金额
          qyliters: 0, // 汽油升数
          cyliters: 0,
          wxAmt: 0,
          dzkAmt: 0,
          zfbAmt: 0,
          xjAmt: 0,
          didiAppAmt: 0,
          tyAppAmt: 0,
          otherAmt: 0,
          memberAmt: 0,
          posAmt: 0,
          czAmt: 0,
          receiveAmt: 0,
        },
      ],
      //到账金额

      formReceive: [
        {
          zongAmt: 0, // 总金额
          zongliters: 0, // 总销量
          qyamt: 0, // 汽油金额
          cyamt: 0, // 柴油金额
          qyliters: 0, // 汽油升数
          cyliters: 0,
          wxAmt: 0,
          dzkAmt: 0,
          zfbAmt: 0,
          xjAmt: 0,
          didiAppAmt: 0,
          tyAppAmt: 0,
          otherAmt: 0,
          memberAmt: 0,
          posAmt: 0,
          czAmt: 0,
          receiveAmt: 0,
        },
      ],

      // 今日数据
      infoFrom: [
        {
          czAmt: 0,
          xfAmt: 0,
          yeAmt: 0,
          jrhy: 0,
          zonghy: 0,
        },
      ],
      // 表单校验
      rules: {},
    };
  },
  created() {
    this.getData(0);
  },
  methods: {
    /** 查询优惠劵管理列表 */
    getList(query) {
      if (this.jiBie == 0) {
        listAllSum(query).then((response) => {
          if (response.data != null) {
            console.log("----", response.data);
            this.form[0].zongAmt = response.data.amt;
            this.form[0].zongliters = response.data.orderLiters;
          }
        });
        listReceiveAmt(query).then((response) => {
          if (response.data != null) {
            console.log("----", response.data);
            this.formReceive[0].czAmt = response.data.czAmt;
            this.formReceive[0].receiveAmt = response.data.amt;
          }
        });
      } else {
        listSum(query).then((response) => {
          if (response.data != null) {
            this.form[0].zongAmt = response.data.amt;
            this.form[0].zongliters = response.data.orderLiters;
          }
        });
        listReceiveAmt(query).then((response) => {
          if (response.data != null) {
            console.log("----", response.data);
            this.formReceive[0].czAmt = response.data.czAmt;
            this.formReceive[0].receiveAmt = response.data.amt;
          }
        });
      }
      listOilType(query).then((response) => {
        if (response.hasOwnProperty("rows")) {
          for (let i in response.rows) {
            if (response.rows[i].oilType === "1") {
              this.form[0].qyamt = response.rows[i].amt;
              this.form[0].qyliters = response.rows[i].orderLiters;
            } else if (response.rows[i].oilType === "2") {
              this.form[0].cyamt = response.rows[i].amt;
              this.form[0].cyliters = response.rows[i].orderLiters;
            }
          }
        }
      });
      listViewData(query).then((response) => {
        console.log("resjfjfj", response);
        if (response.data != null) {
          if (response.data.wxAmt) {
            this.form[0].wxAmt = response.data.wxAmt;
          } else {
            this.form[0].wxAmt = 0;
          }
          if (response.data.dzkAmt) {
            this.form[0].dzkAmt = response.data.dzkAmt;
          } else {
            this.form[0].dzkAmt = 0;
          }
          if (response.data.zfbAmt) {
            this.form[0].zfbAmt = response.data.zfbAmt;
          } else {
            this.form[0].zfbAmt = 0;
          }
          if (response.data.xjAmt) {
            this.form[0].xjAmt = response.data.xjAmt;
          } else {
            this.form[0].xjAmt = 0;
          }
          if (response.data.didiAppAmt) {
            this.form[0].didiAppAmt = response.data.didiAppAmt;
          } else {
            this.form[0].didiAppAmt = 0;
          }
          if (response.data.tyAppAmt) {
            this.form[0].tyAppAmt = response.data.tyAppAmt;
          } else {
            this.form[0].tyAppAmt = 0;
          }
          if (response.data.otherAmt) {
            this.form[0].otherAmt = response.data.otherAmt;
          } else {
            this.form[0].otherAmt = 0;
          }
          if (response.data.memberAmt) {
            this.form[0].memberAmt = response.data.memberAmt;
          } else {
            this.form[0].memberAmt = 0;
          }
          if (response.data.posAmt) {
            this.form[0].posAmt = response.data.posAmt;
          } else {
            this.form[0].posAmt = 0;
          }
        }
        this.form = [...this.form];
      });
    },
    //本日的数据
    getTodayList(query) {
      // 查询汇总充值金额
      listCZXFData(query).then((response) => {
        if (response.data != null) {
          if (response.data.czAmt) {
            this.infoFrom[0].czAmt = response.data.czAmt;
          } else {
            this.infoFrom[0].czAmt = 0;
          }
          if (response.data.xfAmt) {
            this.infoFrom[0].xfAmt = response.data.xfAmt;
          } else {
            this.infoFrom[0].xfAmt = 0;
          }
        }
      });

      // 汇总电子卡数据
      listHYData(query).then((response) => {
        if (response.data != null) {
          if (response.data.amt) {
            this.infoFrom[0].yeAmt = response.data.amt;
          } else {
            this.infoFrom[0].yeAmt = 0;
          }
          if (response.data.num) {
            this.infoFrom[0].zonghy = response.data.num;
          } else {
            this.infoFrom[0].zonghy = 0;
          }
        }
      });
      // 今日汇总数据
      listJRHYData(query).then((response) => {
        if (response.data != null) {
          if (response.data.num) {
            this.infoFrom[0].jrhy = response.data.num;
          } else {
            this.infoFrom[0].jrhy = 0;
          }
        }
      });
      listReceiveAmt(query).then((response) => {
        if (response.data != null) {
          console.log("----", response.data);
          this.formReceive[0].czAmt = response.data.czAmt;
          this.formReceive[0].receiveAmt = response.data.amt;
        }
      });
    },
    getData(type) {
      let day;
      this.reset();
      const query = {
        stationId: null,
        createdDate: null,
        stationName: null,
        beginTime: null,
        endTime: null,
        levelId: this.levelId,
      };
      switch (type) {
        case 0: // 今日
          query.beginTime = this.dateCalculate();
          query.endTime = this.dateCalculate(1);
          this.getTodayList(query);
          break;
        case 1: // 昨天
          query.beginTime = this.dateCalculate(-1);
          query.endTime = this.dateCalculate();
          break;
        case 2: // 本周
          day = new Date().getDay();
          day = day === 0 ? 7 : day;
          day = -(day - 1);
          query.beginTime = this.dateCalculate(day);
          query.endTime = this.dateCalculate(1);
          break;
        case 3: // 本月
          day = new Date().getDay();
          let datetime = new Date();
          query.beginTime =
            datetime.getFullYear() +
            "-" +
            (new Date().getMonth() + 1) +
            "-01 00:00:00";
          //query.beginTime = this .dateCalculate(day);
          query.endTime = this.dateCalculate(1);
          break;
        case 4: // 指定日期
          if (this.dateRangeCreatedDate == null) {
            this.dateRangeCreatedDate = [];
          }
          query.beginTime = this.dateRangeCreatedDate[0];
          query.endTime = this.dateRangeCreatedDate[1];
        default:
      }
      this.getList(query);
    },

    dateCalculate(num = 0, date = false) {
      if (!date) {
        date = new Date(); //没有传入值时,默认是当前日期
        date =
          date.getFullYear() +
          "-" +
          (date.getMonth() + 1) +
          "-" +
          date.getDate();
      }
      date += " 00:00:00"; //设置为当天凌晨12点
      date = date.replace(/-/g, "/");
      date = Date.parse(new Date(date)) / 1000; //转换为时间戳
      date += 86400 * num; //修改后的时间戳
      var newDate = new Date(parseInt(date) * 1000); //转换为时间
      return (
        newDate.getFullYear() +
        "-" +
        (newDate.getMonth() + 1) +
        "-" +
        newDate.getDate()
      );
    },
    // 表单重置
    reset() {
      this.form[0] = {
        zongAmt: 0,
        zongliters: 0,
        qyamt: 0,
        cyamt: 0,
        qyliters: 0,
        cyliters: 0,
        wxAmt: 0,
        dzkAmt: 0,
        zfbAmt: 0,
        xjAmt: 0,
        didiAppAmt: 0,
        tyAppAmt: 0,
        otherAmt: 0,
        memberAmt: 0,
        posAmt: 0,
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.sum_index {
  width: 100%;
  padding: 0 30px 0 15px;
}
.panel-group {
  padding: 0;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 170px;
  flex-direction: column;
}
.xiaoliang {
  background-image: url("../../assets/image/bj-1.png");
  background-size: 100% 100%;
}
.xiaoe {
  background-image: url("../../assets/image/bj-02.png");
  background-size: 100% 100%;
}
.qiyou {
  background-image: url("../../assets/image/bj-3.png");
  background-size: 100% 100%;
}
.chaiyou {
  background-image: url("../../assets/image/bj-4.png");
  background-size: 100% 100%;
}
.flex-qy {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-qy-sx {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.panel-group {
  padding-left: 10px;
}

.flex-sr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-direction: column;
}
.sr-font {
  font-size: 20px;
  color: #f4a645;
}
</style>
